import { defineComponent, ref } from 'vue'
// import loginStyle from './style/login.module.scss'
import './style/login.scss'
import loginApi from '@/service/api/login'
import {
  NForm,
  NFormItem,
  NFormItemRow,
  NButton,
  NInput,
  NSpin,
  NTabs,
  NTabPane,
  useMessage,
  useLoadingBar
} from 'naive-ui'
import type { FormRules, FormInst } from 'naive-ui'
import type { ILoginParams } from '@/types/api'
import { useRouter } from 'vue-router'
import { authLogin } from '@/router/index'
import { netConfigUse } from '@/stores/modules/netConfig'
import { storeToRefs } from 'pinia'
export default defineComponent({
  name: 'Login',
  setup() {
    const active = ref<number>(0)
    const activeChange = () => {
      active.value = active.value === 0 ? 1 : 0
    }
    const queryForm = ref<ILoginParams>({
      username: 'admin',
      password: '123456'
    })
    const rules: FormRules = {
      username: [
        {
          required: true,
          message: '请输入账号'
        }
      ],
      password: [
        {
          required: true,
          message: '请输入密码'
        }
      ]
    }

    const loginLoading = ref(false)
    const formRef = ref<FormInst | null>(null)
    const message = useMessage()
    const handLogin = () => {
      formRef.value?.validate(errors => {
        if (errors && errors.length > 0) {
          const info: any = errors[0][0]
          message.error(info.message)
        } else {
          login()
        }
      })
    }
    const loadingBar = useLoadingBar()
    const router: any = useRouter()
    const { getNetConfig: netConfig } = storeToRefs(netConfigUse())
    const login = async () => {
      try {
        if (loginLoading.value) return
        loginLoading.value = true
        loadingBar.start()
        const { code, data } = await loginApi.login(queryForm.value)
        if (code !== 200) {
          loginLoading.value = false
          loadingBar.error()
          return
        }
        const firthPath = await authLogin(data[netConfig.value.tokenName], false)
        loadingBar.finish()
        router.replace(firthPath)
      } catch (e) {
        loginLoading.value = false
        loadingBar.error()
      }
    }
    return () => (
      <>
        <div class="loginPage">
          {/*<div class={` ${loginStyle.loginPage}`}>*/}
          <div class={`card  ${active.value === 1 ? 's-gignup' : null}`}>
            <div class="form sign-in">
              <h2>后台管理系统</h2>
              <NForm ref={formRef} model={queryForm.value} show-feedback rules={rules}>
                <NFormItem path="username">
                  <label>
                    <span>账号</span>
                    <input type="text" v-model={queryForm.value.username} />
                  </label>
                </NFormItem>
                <NFormItem path="username">
                  <label>
                    <span>密码</span>
                    <input type="password" v-model={queryForm.value.password} />
                  </label>
                </NFormItem>
              </NForm>
              <NButton type="primary" class="submit" onClick={handLogin}>
                <>
                  {loginLoading.value && (
                    <NSpin stroke="#fff">
                      {{
                        icon: () => <i class="esayIcon esayIcon-a-jiazaizhongdaxiao text-white" />
                      }}
                    </NSpin>
                  )}

                  <span>登录</span>
                </>
              </NButton>
              <p class="mt-[15px] text-center text-[14px] font-bold text-black cursor-pointer hover:text-red-600">
                忘记密码
              </p>
            </div>
            <div class="sub-cont">
              <div class="img">
                <div class="img-text m-up">
                  <h2>New here?</h2>
                  <p>Sign uo and discover great amount of new opportunities!</p>
                </div>
                <div class="img-text m-in">
                  <h2>One of us?</h2>
                  <p>If you already has ad account, just sign in. We've missed you!</p>
                </div>
                <div class="img-btn" onClick={activeChange}>
                  <span class="m-up">注册</span>
                  <span class="m-in">登录</span>
                </div>
              </div>
              <div class="form sign-up">
                <h2>后台管理系统</h2>
                <label>
                  <span>Eamil Address</span>
                  <input type="email" name="email" />
                </label>
                <label>
                  <span>Password</span>
                  <input type="password" name="password" />
                </label>
                <n-button class="submit" type="primary">
                  注册
                </n-button>
                <p class="forrgot-pass">Forgot Password ?</p>
              </div>
            </div>
          </div>
          <div class="phone-card">
            <div class="title">后台管理系统</div>
            <div class="form">
              <NTabs default-value="signin" size="large" animated justify-content="space-evenly">
                <NTabPane name="signin" tab="登录">
                  <NForm model={queryForm.value}>
                    <NFormItemRow label="用户名">
                      <NInput
                        v-model:value={queryForm.value.username}
                        placeholder="请输入账号"
                      ></NInput>
                    </NFormItemRow>
                    <NFormItemRow label="密码">
                      <NInput
                        type="password"
                        v-model:value={queryForm.value.username}
                        show-password-on="click"
                        placeholder="请输入密码"
                      ></NInput>
                    </NFormItemRow>
                  </NForm>
                  <NButton
                    type="primary"
                    block
                    strong
                    disabled={loginLoading.value}
                    onClick={handLogin}
                  >
                    <>
                      {loginLoading.value && (
                        <NSpin stroke="#fff">
                          {{
                            icon: () => (
                              <i class="esayIcon esayIcon-a-jiazaizhongdaxiao text-white"></i>
                            )
                          }}
                        </NSpin>
                      )}

                      <span>登录</span>
                    </>
                  </NButton>
                </NTabPane>
                <NTabPane name="signup" tab="注册">
                  未开放...
                </NTabPane>
              </NTabs>
            </div>
          </div>
        </div>
      </>
    )
  }
})
